<template>
	<view id="notice-list" @click="conClick">
		<!-- 点击反馈组件 -->
		<clickCircle ref="clickCircle"></clickCircle>
		<view class='nav'>
			<navTab ref="navTab" :tabTitle="tabTitle" :isShowNum="false" @changeTab='changeTab'></navTab>
			<view class="no-read-num" v-if="noReadNum > 0">{{noReadNum}}</view>
		</view>
		<!-- swiper切换 swiper-item表示一页 scroll-view表示滚动视窗 -->
		<swiper id="swiper" :current="tabCurrentIndex" duration="300" @change="swiperTab">
			<swiper-item v-for="(listItem,listIndex) in navList" :key="listIndex">
				<scroll-view class="scroll-content" scroll-y="true">
					<view class="list-li" v-for="(list,index) in listItem.list" :key="index"
						  @click="toNoticeDetail(list.id)">
						<view class="title">{{list.title}}</view>
						<view class="content">
							<view class="time">{{list.create_time}}</view>
							<view class="opt">查看详情
								<uni-icons class="row-icon" type="arrowright" size="16"></uni-icons>
							</view>
						</view>
						<image v-if="listItem.id == 1 && list.status == 1" class="no-read"
							   src="../../static/img/no-read.png" mode=""></image>
					</view>
					<view class="no-data-tips" v-if="listItem.list.length == 0">
						<image class="no-data-img" src="../../static/img/no-data-img.png" mode=""></image>
						<view>暂无数据</view>
					</view>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>
<script>
	import navTab from '../../components/navTab.vue';
	import clickCircle from '../../components/clickCircle.vue';
	import {
		apiPushIndex,
		apiGetPushMessageList
	} from '../../../http/apis.js'

	import {
		mapState
	} from 'vuex'

	export default {
		computed: {
			...mapState(['token'])
		},
		components: {
			navTab,
			clickCircle
		},
		data() {
			return {
				tabTitle: ['公告', '消息'], //导航栏格式 --导航栏组件
				tabCurrentIndex: 0, //sweiper所在页
				noticeList: [],
				newsList: [],
				navList: [{
					id: 0,
					text: '公告',
					list: []
				}, {
					id: 1,
					text: '消息',
					list: []
				}],
				noReadNum: 0
			}
		},
		onShow() {
			this.getNoticeList()
			if (this.$refs["navTab"]) {
				this.switchNavBar()
			}
		},
		onLoad() {
		},
		methods: {
			// 是否切换nav
			switchNavBar() {
				if (this.$store.getters.urgeDialogNum != 0) {
					this.$refs["navTab"].navClick(1)
				}
			},
			// 获取消息列表
			getNoticeList() {
				apiPushIndex({
					token: this.token
				}).then(res => {
					if (res.data.code == 1) {
						this.navList[0].list = res.data.msg.notice_list
					}
				}).catch(res => {
					this.$msg.showToast(res.data.msg)
				})
				apiGetPushMessageList({
					token: this.token,
					page: 1,
					pageSize: 999
				}).then(res => {
					if (res.data.code == 1) {
						this.noReadNum = 0
						this.navList[1].list = res.data.msg.res
						for (var i in res.data.msg.res) {
							if (res.data.msg.res[i].status == 1) {
								this.noReadNum++
							}

						}
					}
				}).catch(res => {
					this.$msg.showToast(res.data.msg)
				})
			},
			toNoticeDetail(id) {
				uni.navigateTo({
					url: './noticeDetail?id=' + id + '&type=' + this.tabCurrentIndex
				});
			},
			conClick(e) {
				this.$refs.clickCircle.conClick(e);
			},
			swiperTab(e) {
				this.tabCurrentIndex = e.target.current;
				this.$refs.navTab.navClick(this.tabCurrentIndex)
			},
			changeTab(index) {
				this.tabCurrentIndex = index
			},
		},
		mounted() {
			this.switchNavBar()
		}
	}
</script>

<style lang="scss">
	page{
		background: #F5F5F5;
	}
	#notice-list{
		#swiper {
			min-height: 100vh;
		}
		.no-read-num {
			background: $theme-color;
			color: #FFFFFF;
			display: inline-block;
			font-size: 24upx;
			width: 30upx;
			height: 30upx;
			text-align: center;
			line-height: 30upx;
			border-radius: 50%;
			position: absolute;
			right: 120upx;
		    top: 16upx;
		}
		.scroll-content {
			height: 100%;
			box-sizing: border-box;
			padding-bottom: 70px;
			.list-li {
				background: #FFFFFF;
				margin: 32upx 32upx 0 32upx;
				padding: 32upx 32upx 20upx 32upx;
				border-radius: 24upx;
				position: relative;
				.no-read {
					position: absolute;
					right: 0;
					top: 0;
					width: 60upx;
					height: 60upx;
				}
				.title {
					font-size: 30upx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #333333;
					line-height: 42upx;
				}
				.content {
					display: flex;
					justify-content:space-between;
					align-items: center;
					.time {
						font-size: 26upx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #999999;
						line-height: 24upx;
					}
					.opt {
						font-size: 28upx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: $theme-color;
						line-height: 40px;
					}

					.row-icon {
						color: $theme-color!important;
					}
				}
			}
		}
		.no-data-tips {
			text-align: center;
			font-size: 28upx;
			font-weight: 400;
			color: #999999;
			line-height: 28upx;
			.no-data-img {
				width: 300upx;
				height: 300upx;
				margin-top: 200upx;
				margin-bottom: 20upx;
			}
		}
	}
</style>
